<template>
  <view class="buy1">
    <view class="txt1">
      <view> 买入金额 </view>
      <view class="input">
        <input ref="inputvalue" type="text" v-model="data.regularTurnover" />
        <image
          src="../../../static/iamges/dingqihuangjin/caca.png"
          mode=""
        ></image>
      </view>
      <view class="earnings">
        <text>最低</text>
        {{ data.money }}
        <text>起购</text>
      </view>
      <view class="checkbox-group">
        <checkbox-group @change="add">
          <label> <checkbox value="add" />到期自动买入下一期 </label>
        </checkbox-group>
      </view>
    </view>

    <view class="txt2">
      <view>调仓方式</view>
      <view class="txt">
        <view> 智能调仓 </view>
        <image
          src="../../../static/iamges/maichu/fanhui@2x.png"
          mode=""
        ></image>
      </view>
    </view>

    <view class="txt2">
      <view>付款方式</view>
      <view class="txt">
        <view class="t">
          <view> 我的钱包 </view>
          <view> 最多支付30000.00元 </view>
        </view>
        <image
          src="../../../static/iamges/maichu/fanhui@2x.png"
          mode=""
        ></image>
      </view>
    </view>

    <view class="txt3">
      <checkbox-group @change="add">
        <label>
          <checkbox />基金销售服务由惠通金融提供，我已阅读并<text
            >产品相关协议</text
          ></label
        >
      </checkbox-group>
    </view>
    <view class="code">
      <input type="text" placeholder="请输入验证码" v-model="data.code" />
      <button @click="code">获取验证码</button>
    </view>
    <view class="button">
      <button @click="imaBuy(data)">立即购买</button>

      <view> 基金销售服务由惠通金融服务有限公司提供 </view>
      <view> 基金有风险，透支需谨慎 </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("regular");
export default {
  onLoad(options) {
    console.log(options);
    wx.setNavigationBarTitle({
      title: options.name,
    });
    this.data.money = options.money;
    this.data.regularId = options.id - 0;
    this.data.regularName = options.name;
    this.data.regularTurnover = options.money;
  },
  data() {
    return {
      data: {
        buyMode: "walletPay",
        code: "",
        isAutomaticRenewal: 1,
        monthNum: 12,
        regularId: 0,
        regularName: "",
        regularTurnover: "",
        money: 0,
      },
    };
  },
  methods: {
    ...mapActions(["boughtRegular", "getCode"]),
    // 短信验证
    async code() {
      const value = await this.getCode({
        userTel: uni.getStorageSync("userTel"),
      });
      console.log(value, "vvvvv");
      if (value.code == 10001) {
        this.$refs.uToast.show({
          title: "获取验证码成功，2分钟内有效",
          type: "success",
        });
      }
    },
    add(a) {
      console.log(a);
    },

    async imaBuy(data) {
      console.log(data);
      const vaule = await this.boughtRegular(data);
      console.log(vaule, "dataddd");

      if (vaule.code == 10010) {
        this.$refs.uToast.show({
          title: "用户短信验证码不能为空",
          type: "error",
        });
      } else if (vaule.code == 10012) {
        this.$refs.uToast.show({
          title: "验证码错误",
          type: "error",
        });
      } else if (vaule.code == 10038) {
        this.$refs.uToast.show({
          title: "当前用户余额不足/输入最低购买金额不正确",
          type: "error",
        });
      }
      if (vaule.code == 10030) {
        console.log("购买成功");
        uni.navigateTo({
          url:
            "/pages/buy/buySucceed/buySucceed?money=" +
            vaule.data +
            "&name=" +
            this.data.regularName +
            "&url=/pages/riches/regular/regular",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.buy1 {
  .code {
    display: flex;
    background-color: #fafafa;
    align-items: center;
    input {
      background-color: #ffffff;
      height: 60rpx;
      border-radius: 16rpx;
    }
  }
  background-color: #fafafa;
  padding: 24rpx;
  > view {
    background-color: #ffffff;
    padding: 0 24rpx;
  }
  .txt1 {
    font-size: 24rpx;
    color: #999999;
    border-radius: 20rpx;

    .input {
      display: flex;
      align-items: center;
      input {
        font-size: 60rpx;
        color: #333333;
        padding: 6rpx 0;
        height: 70rpx;
      }
      image {
        height: 20rpx;
        width: 20rpx;
      }
    }
    .earnings {
      background-color: #fff1f1;
      padding-left: 24rpx;
      height: 72rpx;
      border-radius: 8rpx;
      align-items: center;
      display: flex;
      text {
        color: #ff4658;
      }
    }
    .checkbox-group {
      padding: 26rpx;
      display: flex;
      flex-direction: row-reverse;
      checkbox {
        padding-right: 16rpx;
      }
    }
  }
  .txt2 {
    margin-top: 40rpx;
    display: flex;
    justify-content: space-between;

    padding: 24rpx 24rpx 24rpx 16rpx;
    align-items: center;
    border-radius: 16rpx;
    image {
      width: 10rpx;
      height: 20rpx;
      padding-right: 20rpx;
      transform: scaleX(-1);
    }
    .txt {
      display: flex;
      align-items: center;
      font-size: 20rpx;
      color: #cdcdcd;
      justify-content: flex-end;
      .t {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }
    }
  }
  .txt3 {
    padding: 40rpx 0 36rpx;
    font-size: 24rpx;
    color: #999999;
    text {
      color: #333333;
    }
  }
  .button {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 22rpx;
    color: #cdcdcd;
    padding: 0;
    button {
      height: 94rpx;
      background-color: #ff4658;
      color: #ffffff;
      border-radius: 16rpx;
      width: 702rpx;
      margin-bottom: 40rpx;
    }
  }
}
</style>
